<template>
<div>
  <div class="tabNav">
   <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b>/<img src="../assets/img/settlement.png" />打款审核</b>
  </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd table-drop" shadow="hover">
                <div class="search">
                  <el-input v-model="input" placeholder="企业名称"></el-input>
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    range-separator="~">
                </el-date-picker>
                  <!-- <el-select v-model="value" placeholder="全部">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select> -->
                  <el-button type="primary" @click="search()">查询</el-button>
                </div>
                <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"
                ref="multipleTable"
                @sort-change="sortChange"
                >
                <el-table-column prop="id" sortable="custom" min-width="100" align="center" label="结算单ID"> </el-table-column>
                <el-table-column prop="settlementNo" sortable="custom" label="结算单编号" width="120">
                </el-table-column>
                <el-table-column
                    prop="businessName"
                    sortable="custom"
                    align="center"
                    label="企业名称"
                    min-width="110"
                >
                </el-table-column>
                <el-table-column prop="amount" sortable="custom" align="center" min-width="110" label="服务款总额">
                  <template #default="item">
                    {{ formatNumber(item.row.amount) }}
                  </template>
                </el-table-column>
                <el-table-column prop="fee" sortable="custom" align="center" label="平台服务费" min-width="110">
                  <template #default="item">
                    {{ formatNumber(item.row.fee) }}
                  </template>
                </el-table-column>
                <el-table-column prop="settlementAmount" sortable="custom" align="center" label="结算总金额"  min-width="130">
                  <template #default="item">
                    {{ formatNumber(item.row.settlementAmount) }}
                  </template>
                </el-table-column>
                <el-table-column prop="endTime" sortable="custom" min-width="140" align="center" label="结算时间">
                    <template #default="item">
                    <template v-if="item.row.endTime == null">-</template>
                    <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endTime)) }}</template>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" sortable="custom" min-width="140" align="center" label="结算单创建时间">
                    <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="caozuo" align="center" label="汇款回执单" width="100" class-name="editor">
                  <template #default="item">
                    <template v-if="item.row.paymentReceiptUrl == null">-</template>
                    <el-button v-else type="text" @click="openUrl(item.row.paymentReceiptUrl)">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="caozuo" align="center" label="汇款明细" width="100" class-name="editor">
                    <template #default="item">
                      <template v-if="item.row.paymentDetailUrl == null">-</template>
                      <el-button v-else type="text" @click="openUrl(item.row.paymentDetailUrl)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="80"
                    class-name="editor"
                >
                <template #default="item">
                  <el-button type="text" v-if="item.row.authPayCode == 0" @click="examines(item.row)">审核</el-button>
                  <!-- <el-button type="text" @click="updateSettleCheckPass(item.row.id)">审核通过</el-button>|
                  <el-button type="text" @click="updateSettleCheck(item.row.id)">驳回</el-button> -->
                  </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>
    <!--结算单明细 -->
    <el-dialog
      title="结算单明细"
      custom-class="task-dialog"
      v-model="addTaskModulesss"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <!-- 个体工商户服务款 -->
        <div class="title">服务款</div>
         <el-table
          :data="addTaskModules"
          stripe
          style="width: 100%"
        >
          <!-- <el-table-column prop="taskId" label="任务ID" width=""> </el-table-column> -->
          <el-table-column prop="taskName" label="任务名称" width="">
          </el-table-column>
          <el-table-column prop="legalIdCard" label="身份证号" width="">
          </el-table-column>
          <el-table-column prop="legalphone" label="手机号" width="">
          </el-table-column>
          <el-table-column prop="bankNo" label="收款卡号" width="180">
          </el-table-column>
          <el-table-column prop="bankName" label="收款银行" width=""></el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态" width="">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
              </template>
          </el-table-column>
          <!-- <el-table-column prop="remarks" label="备注" width=""></el-table-column> -->
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="arrPage"
          :page-size="selectPage1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <div class="title">服务费</div>
        <el-table
          :data="addTaskModules"
          stripe
          style="width: 100%"
          ref="multipleTable"
        >
          <el-table-column prop="settlementNo" label="结算单ID" width=""></el-table-column>
          <el-table-column prop="subFee" label="平台服务费" width=""></el-table-column>
          <el-table-column prop="bankName" label="收款银行" width=""></el-table-column>
          <el-table-column prop="bankNo" label="收款卡号" width=""></el-table-column>
          <el-table-column prop="remarks" label="结算单创建时间" width=""></el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态" width="">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
              </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskModule = false">取 消</el-button>
          <el-button type="primary" @click="addTaskModule = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!--上传打款凭证 -->
    <el-dialog
      title="上传打款凭证"
      custom-class="task-dialog"
      v-model="addTaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <div class="title">服务费</div>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="结算单ID" width=""> </el-table-column>
          <el-table-column prop="amount" label="服务款总额" width="">
            <template #default="item">
              {{ formatNumber(item.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="fee" label="平台服务费" width="">
            <template #default="item">
              {{ formatNumber(item.row.fee) }}
            </template>
          </el-table-column>
          <el-table-column prop="settlementAmount" label="结算总金额" width="">
            <template #default="item">
              {{ formatNumber(item.row.settlementAmount) }}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结算时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="结算单创建时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="taskModule">
          <el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :http-request="file => handleChange(file)"
            :file-list="fileList">
            <b>汇款回执单</b>
            <el-button size="small" type="primary">点击上传汇款回执单</el-button>
          </el-upload>
          <el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :http-request="file => handleChange(file)"
            :file-list="fileList">
            <b>汇款明细</b>
            <el-button size="small" type="primary">点击上传汇款明细</el-button>
          </el-upload>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addTaskModule = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 审核 -->
    <el-dialog
      title="审核"
      custom-class="task-dialog"
      v-model="taskDelShow"
      width="40%"
    >
      <div class="examines">
        <el-form
            ref="taskForm"
            class="demo-ruleForm"
          >
          <el-form-item style="margin: -10px 13px 16px 60px;" label="税源地：" prop="bankExtendId">  <!-- v-if="payMode == 1" -->
            <el-select v-model="taskForm.bankExtendId" placeholder="请选择税源地" @change="setDateRanges()">
                <el-option
                  v-for="item in tableDatas2"
                  :key="item.id"
                  :label="item.authBusinessName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
            <b>审核意见：</b>
            <el-input style="height: 500" type="textarea" v-model="grtdsp"></el-input>
          </el-form-item>  
        </el-form>   
      </div> 
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="taskDelShow = false">取 消</el-button>
          <el-button type="danger" @click="taskDelShow1(1)">驳 回</el-button>
          <el-button type="primary" @click="taskDelShow1(2)">通 过</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="审核" v-model="updateSettleCheckShow" custom-class="examine-style" width="30%">
      <div class="modifyPassword">
          <el-input placeholder="请输入驳回原因" type="text" v-model="updateSettleChecks"></el-input>
      </div>
      <template #footer>
      <span class="dialog-footer">
          <el-button @click="updateSettleCheckShow = false">取 消</el-button>
          <el-button type="primary" @click="updateSettleCheckShows">确 定</el-button>
      </span>
      </template>
  </el-dialog>
</div>  
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      fileList: [{}],
      updateSettleCheckShow: false,
      addTaskModulesss: false,
      updateSettleChecks: '',
      paymentStatuts: {
          1: "未打款",
          0: "未结算",
          2: "已打款",
          3: "废弃",
        },
      addTaskModule: false,
        options: [{
          value: '',
          label: '全部'
        },{
          value: '0',
          label: '未结算'
        }, {
          value: '1',
          label: '未打款'
        }, {
          value: '2',
          label: '已打款'
        }, {
          value: '3',
          label: '废弃'
        }],
        value: '',
        value1: '',
        input: '',
      tableData: [],
      taskForm: {
        bankExtendId: "",
        businessId: "", 
      },
      tableDatas2: [],
      addTaskModules: [],
      bill_status: '',
      startTime: '',
      checkboxSelect: 0,
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [], // 选中的数据
      currentPage1: 1,
      selectPage1: 10,
      updataId: null,
      taskDelShow: false,
      grtdsp: '',
      payMode: '',
      authNumbId: '',
      settlementNos: '',
      paymentStatuts2: '',
      authId: '',
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    setDateRanges(){
      for(var i = 0; i < this.tableDatas2.length; i++){
        if(this.tableDatas2[i].id == this.taskForm.bankExtendId){
          // this.authBankNos = this.tableDatas2[i].authBankNo
          this.authId = this.tableDatas2[i].id
          // console.log(this.authId)
        }
      }
    }, 
    examines(row) {
      // 审核
      this.grtdsp = ''
      this.taskDelShow = true
      this.payMode = row.payMode
      this.authNumbId = row.id
      this.settlementNos = row.settlementNo
      this.taskForm.bankExtendId = ''
      // 查询企业绑定的税源地
      this.$http({
        url: "/api/quick/tax/selectByBusinessId",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          businessId: row.businessId,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.tableDatas2 = data.result
        }
      });
    },
    taskDelShow1(nums){
      if(nums == 1){
        this.paymentStatuts2 = 6
        this.authPayCodes = 2
        this.grtflg = 'N'
      }else {
        this.grtflg = 'Y'
        this.authPayCodes = 1
        this.paymentStatuts2 = 2
      }
      // if(this.payMode == 2){
      //   // 平台端打款流程审批--线下
      //   this.$http({
      //     url: "/api/quick/numb/authNumb",
      //     method: "post",
      //     headers: {
      //       "Content-Type": "application/json",
      //     },
      //     data: {
      //       id: this.authNumbId,
      //       checkReason: this.grtdsp,
      //       settlementNo: this.settlementNos,
      //       authPayCode: this.authPayCodes, // 审核状态
      //       payMode: this.payMode,
      //       paymentStatuts: this.paymentStatuts2,
      //     }
      //   }).then((data) => {
      //     if (data.code === 0) {
      //       this.$message({
      //         message: '操作成功',
      //         type: 'success',
      //         offset: 60
      //       })
      //       this.getTableData();
      //       this.taskDelShow = false
      //     }
      //   });
      // }else {
        // 平台端打款流程审批
        if (this.payMode == 1) {
          if (this.taskForm.bankExtendId == '') {
            this.$message({
              message: '请选择税源地',
              type: 'error',
              offset: 60
            })
          }else{
            this.$http({
              url: "/api/quick/record/bankRecordPass",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                // authBankNo: this.authBankNos,
                authId: this.authId,
                grtdsp: this.grtdsp,
                grtflg: this.grtflg,
                settlementNo: this.settlementNos,
                id: this.authNumbId,
                payMode: this.payMode,
                paymentStatuts: this.paymentStatuts2,
              }
            }).then((data) => {
              if (data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  offset: 60
                })
                this.getTableData();
                this.taskDelShow = false
              }
            });
          }
        }else {
          this.$http({
            url: "/api/quick/record/bankRecordPass",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: {
              // authBankNo: this.authBankNos,
              authId: this.authId,
              grtdsp: this.grtdsp,
              grtflg: this.grtflg,
              settlementNo: this.settlementNos,
              id: this.authNumbId,
              payMode: this.payMode,
              paymentStatuts: this.paymentStatuts2,
            }
          }).then((data) => {
            if (data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                offset: 60
              })
              this.getTableData();
              this.taskDelShow = false
            }
          });
        }
        
      // }
    },
    // 1通过 2驳回 paymentStatuts
    updateSettleCheckPass(id){
      this.$http({
        url: "/api/quick/finance/manage/updateSettleCheck?checkCode=" + 1 + "&checkReason=" + '' + "&id=" + id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code === 0) {
            this.$message({
              message: '审核成功',
              type: 'success'
            });
            this.getTableData();
            
          }
      });
    },
    updateSettleCheckShows(){
      this.updateSettleCheckShow = false;
      this.$http({
        url: "/api/quick/finance/manage/updateSettleCheck?checkCode=" + 2 + "&checkReason=" + this.updateSettleChecks + "&id=" + this.updataId,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code === 0) {
          this.$message({
            message: '驳回成功',
            type: 'success'
          });
          this.getTableData();
        }
      });
    },
    updateSettleCheck(id){
        this.updateSettleCheckShow = true;
        this.updataId = id
    },
    search(){
      this.getTableData();
    },
    getTableData() {
      // 获取列表信息
      if(this.value1){
        this.bill_status = this.value1[1]
        this.startTime = this.value1[0]
      }else {
        this.bill_status = ''
        this.startTime = ''
      }
      this.$http({
        url: "/api/quick/finance/manage/querySettleListByStatus",
        method: "post",
        headers: {
          // "businessId": ' ',
          "Content-Type": "application/json",
        },
        data: {
          // isUploadBill: this.value,
          mixedStr: this.input,
          startTime: this.startTime,
          endTime: this.bill_status,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          paymentStatuts: 5,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.total = data.result.total;
          this.tableData = data.result.list;
        }
      });
    },
    getBusinessList(settlementNo) {
        this.TaskModule = true;
        this.$http({
          url: "/api/quick/finance/manage/querySettleSeverFeeBySettleNo",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            settlementNo: settlementNo,
          }
        }).then((data) => {
          if (data.code === 0) {
            this.businessList = data.result.list;
            this.total = data.result.total;
        }
      });
    },
    getAddTaskModule(settlementNo) {
        this.addTaskModule = true;
        this.$http({
          url: "/api/quick/finance/manage/querySettleSeverFeeBySettleNo",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            settlementNo: settlementNo,
          }
        }).then((data) => {
          if (data.code === 0) {
            this.addTaskModules = data.result.list;
            this.total = data.result.total;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData();
    },
    handleChange(param) {
      // 上传
			const form = new FormData()
      // 文件对象
      form.append('file', param.file)
			axios({
        method: "POST",
        url: "/api/quick/finance/manage/uploadCertificate",
				headers: {
          "content-type": "multipart/form-data",
          "Authorization": localStorage.getItem("linggong_token")
        },
        data: form
      }).then(() => {
        this.$message({
            message: '上传成功',
            type: 'success'
          });
      })
        .catch(() => {
          this.$message({
            message: '上传失败',
            type: 'success'
          });
        });
    },
    handleSelectionChange() {},
    addTask() {
        this.addTaskModule = true;
    },
    openUrl(url) {
      // 打开新窗口查看协议
      let newwin = window.open();
      newwin.document.write("<img src=" + url + " />");
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == 'businessName') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableData()
    }
  },
};
</script>
<style scoped>
.taskModule b {
  font-weight: normal;
    font-size: 12px;
    float: left;
    line-height: 32px;
    margin-left: 16px;
}
.taskModule .el-upload {
    border: 0;
    width: 290px;
    height: 34px;
    margin-top: 20px;
}
.taskModule .el-upload-list {
  display: none;
}
.examines {
  margin-top: 30px;
}
.examines b {
  font-size: 13px;
  font-weight: normal;
  color: #333;
  float: left;
  margin: -5px 13px 0 8%;
}
.examines .el-textarea {
  width: 70%;
}
.examines .el-textarea__inner {
  height: 100px;
}
</style>
